<template>
  <div id="sun" style="width: 100%; height: 100%"></div>
</template>
  
<script>
import { onMounted, reactive, watch, ref } from "vue";
import { useStore } from "vuex";
import sunData from "../../assets/json/SunData.json";
import * as echarts from "echarts";
export default {
  setup() {
    const store = useStore();
    const data = reactive(sunData);

    const time_periods = [
      { name: "总角", start: 701, end: 715 },
      { name: "志学", start: 716, end: 720 },
      { name: "弱冠", start: 721, end: 730 },
      { name: "而立", start: 731, end: 740 },
      { name: "知天命", start: 741, end: Infinity },
    ];

    const currentPeriod = ref(null);
    const previousPeriod = ref(null);

    watch(
      () => store.state.time,
      (newTime) => {
        currentPeriod.value = time_periods.find(
          (period) => newTime >= period.start && newTime <= period.end
        );

        if (currentPeriod.value !== previousPeriod.value) {
          drawSun(currentPeriod.value, data);
        }

        previousPeriod.value = currentPeriod.value;
      }
    );

    onMounted(() => {
      currentPeriod.value = time_periods.find(
        (period) =>
          store.state.time >= period.start && store.state.time <= period.end
      );
      drawSun(currentPeriod.value, data);
    });

    function drawSun(targetPeriod, data) {
      var chartDom = document.getElementById("sun");
      // chartDom.innerHTML = "";
      var myChart = echarts.init(chartDom);
      var option;
      myChart.clear(); // 清除图表内容
      function filterThirdLevelData(data, targetPeriodName) {
        const filteredData = data.find(
          (level1) => level1.name === targetPeriodName
        );

        if (filteredData) {
          filteredData.children = filteredData.children?.slice(0, 13) || [];

          filteredData.children.forEach(function (level2) {
            level2.children = level2.children?.slice(0, 5) || [];

            // 保存第三层数据在 level2.children 的 children 属性中
            level2.children.forEach(function (level3) {
              level3.children = level3.children || [];
            });
          });

          return [filteredData];
        } else {
          return [];
        }
      }

      var newColors = ['#b89471', '#60715f', '#b6976e', '#a7a18c', '#d6bba2','#878876','#a87c6c','#78675f','#b5a48c'];

      // 更新数据中的颜色
      function updateColors(data) {
        for (var i = 0; i < data.length; i++) {
          data[i].itemStyle = {
            color: newColors[i % newColors.length]
          };

          if (data[i].children) {
            updateColors(data[i].children);
          }
        }
      }

      updateColors(data)
      var filteredData = filterThirdLevelData(data, targetPeriod.name);

      option = {
        title: {},
        series: {
          type: "sunburst",
          data: filteredData,
          radius: [0, "95%"],
          sort: undefined,
          emphasis: {
            focus: "ancestor",
          },
          levels: [
            {},
            {
              r0: "15%",
              r: "35%",
              itemStyle: {
                // borderWidth: 1,
                color: "#000", // 子层颜色修改为 #8f704d
              },
              label: {
                rotate: "tangential",
                textStyle:{
                  color:'#43341B'
                }
              },
            },
            {
              r0: "35%",
              r: "70%",
              label: {
                align: "right",
              },
              itemStyle: {
                //最外层颜色
                color: "#b89471", // 子层颜色修改为 #8f704d
              },
            },
            {
              r0: "70%",
              r: "72%",
              label: {
                position: "outside",
                padding: 3,
                silent: false,
              },
              itemStyle: {
                // borderWidth: 1,
                color: "#715752", // 子层颜色修改为 #8f704d
              },
            },
          ],
        },
      };

      myChart.setOption(option);

      myChart.on("click", (params) => {
        const regex = /^《(.+)》$/;
        // console.log(params.name);
        if (params.name > 700 && params.name < 800) {
          const currentTime = Number(params.name);
          store.commit("updateTime", currentTime);
          store.commit("updateTitle", null);
        }
        // 添加判断条件，检查 params.name 是否是以《和》包裹的字符串
        else if (typeof params.name === "string" && regex.test(params.name)) {
          const title = params.name;
          console.log("Content:", title);
          store.commit("updateTitle", title);
        }

        // 原本的点击事件代码
        myChart.dispatchAction({});
      });
    }
  },
};
</script>
  
<style></style>
  